import React from 'react'
import ReactJson from "react-json-view";
import "../../common/common.css"
export default function JsonView() {
    const jsonData = {
        "id": "1010120005",
        "key": "midp-echarts-radius-bar",
        "name": "玫瑰图",
        "category": 1,
        "data_type": 2,
        "is_default": true,
        "props": {
            "zindex": 2,
            "x": 20,
            "y": 100,
            "width": 400,
            "height": 300,
            "options": {
                "color": "#00FFE4"
            },
            "data": {
                "xAxis": {
                    "label": "名称",
                    "value": [
                        {
                            "value": "应用1",
                            "show": true
                        }
                    ]
                },
                "yAxis": {
                    "label": "值",
                    "value": [
                        [
                            123,
                            89,
                            90
                        ]
                    ]
                }
            },
            "apiId": "",
            "dataType": "static",
            "apiData": [],
            "apiParam": {}
        }
    }
    const handleJSONEdit = (jsonData) => {
        console.log(jsonData);
    }
    return (
        <div>
            <h1>JsonView</h1>
            <button className='returnButton' style={{ padding: '0px' }}><a href="/">点击返回主菜单</a></button>

            <div style={{ textAlign: "left" }}>
                <ReactJson src={jsonData} />
                <ReactJson
                    src={jsonData}
                    name={false}
                    enableClipboard={false}
                    displayObjectSize={false}
                    displayDataTypes={false}
                    theme="monokai"
                    style={{
                        fontWeight: "bold",
                        fontFamily: "monospace",
                        letterSpacing: "1px",
                        borderRadius: '3px',
                        padding: 24,
                        minHeight: 280,
                    }}
                />
            </div>
            <div className="edit" style={{ textAlign: "left" }}>
                <ReactJson
                    src={jsonData}
                    onEdit={handleJSONEdit}
                />
            </div>
        </div>
    )
}
